<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.org/thymeleaf/shiro">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximumscale=1">
    <title>layui布局</title>
    <!--第一步，引入layui的资源-->
    <link rel="stylesheet" th:href="@{/resources/layui/css/layui.css}">
</head>
<body>

<!--在body下引入js资源-->
<script th:src="@{/resources/layui/layui.js}"></script>

<!--开始写，layui的资源-->
<script th:inline="none">//此处有坑，需要设置“th:inline="none"”
//一般直接写在一个js文件中
//同时，在layui中引入table表格
layui.use(['layer', 'form', 'table'], function () {
    var layer = layui.layer
        , form = layui.form
        , table = layui.table
        , $ = layui.jquery;

    var tableIns=table.render({
        elem: '#outrecordTable',//指定表格的id选择器
        height: 312,
        url: '/outrecord/outrecordList',
        id: 'outrecordListTable',//表格的索引
        //表格的分页
        page: true,
        limits: [5, 10, 15, 20],
        limit: 5,
        //表格数据的回填方法
        done:function(res){
        },
        cols: [[
            {field: 'id', title: '编号', width: 80, sort: true, type:"checkbox"},
            {field: 'vehiclefiles', title: '车牌号码', templet: function (obj) {
                return obj.vehiclefiles.vehiclenum ;
            }},
            {field: 'dept', title: '部门', templet: function (obj) {
                return obj.dept.name ;
            }},
            {field: 'outtime', title: '出车时间'},
            {field: 'predicttime', title: '预计回车时间'},
            {field: 'returntime', title: '回车时间'},
            {field: 'otherpeople', title: '随行人员'},
            {field: 'driver', title: '驾驶员', templet: function (obj) {
                return obj.driver.name ;
            }},
            {field: 'destination', title: '目的地'},
            {field: 'creatpeople', title: '创建人员'},
            //templet 状态的判断
            {
                field: 'position', title: '本次行程', templet: function (obj) {
                return obj.position == 1 ? '未回车' : '已回车';
            }
            },
            {title: '操作',width: 250,templet:'#userListBtn',fixed:'right',align:'center'}
        ]]
    })

    $("#out").click(function () {
        //代开子页面
        var index=layui.layer.open({
            //type 对应好1到五的值 不同的值可以传递不同的属性
            type:2,
            title:'出车登记',
            content:'/outrecord/goOutrecord',
            area:['600px','500px'],
            success:function(layero,index){

                var body=layer.getChildFrame('body',index);
                //少了这个是 不能从父页面向子页面传值的
                //向content的值隐藏传递值

                //这样就将值传递给子页面中id为userIdHiden的隐藏域
            },
            btn:['确定','取消'],
            yes:function (index,layero) {
                //子页面向符页面传值 窗口对象window["layui-layer-iframe"+index]
                var res=window["layui-layer-iframe"+index].callbackdata();
                $.ajax({
                    url:'/outrecord/insertOut',
                    data:
                      res,
                    traditional:true,
                    success:function(res){
                            layer.msg(res.message);
                            layui.layer.close(index);
                    }}
                )
            },
            btn2:function (index,layero) {
                layui.layer.close(index);
            }
        })
    })
});

</script>
<blockquote class="layui-elem-quote quoteBox">
    <form class="layui-form">
        <div class="layui-inline">
            <input type="text" class="layui-input" placeholder="请输入姓名" id="realname">
        </div>
        <div class="layui-inline">
            <button type="button" class="layui-btn " id="searchBtn">搜索</button>
        </div>
        <shiro:hasPermission name="user:add">
            <div class="layui-inline">
                <button type="button" class="layui-btn " id="out">出车登记</button>
            </div>
        </shiro:hasPermission>
    </form>
</blockquote>
<table id="outrecordTable" lay-filter="userList"></table>
</body>
</html>